'use client'

import { useState, useRef, useCallback } from 'react'
import { ContentTabs } from './components/content-tabs'
import { FormSection } from './components/form-section'
import { PreviewSection } from './components/preview-section'
import { TextSection } from './components/text-section'
// import TiktokIcon from '@/assets/icons/tiktok.svg'
import { FileVideo2 } from 'lucide-react'
import VideoLipSync from './components/VideoLipSync'

const contentTabs = [
  {
    value: 'tiktok',
    label: 'Oral Video',
    Icon: FileVideo2 as any,
  },
  {
    value: 'kouxing',
    label: 'Lip Sync Video',
    Icon: FileVideo2,
  },
  // {
  //   value: 'feature',
  //   label: '功能XXX',
  //   Icon: ControlIcon,
  // },
]

export default function HomePage() {
  const [historyId, setHistoryId] = useState<string>('')
  const [url, setUrl] = useState<string>('')
  const [formSectionParams, setFormSectionParams] = useState({})
  const [activeTab, setActiveTab] = useState('tiktok')

  const formInfo = useRef<any>({})
  const commit = (data: any) => {
    const broadcast_copy_history_id = data.broadcastCopyHistory.id
    setHistoryId(broadcast_copy_history_id)
  }
  const getFormInfo = useCallback(() => {
    return {
      face_image_url: formInfo.current?.face_image_url ?? '',
      video_url: formInfo.current?.video_url ?? '',
      vol: formInfo.current?.vol ?? '',
      speed: formInfo.current?.speed ?? '',
      tone_id: formInfo.current?.tone_id ?? '',
    }
  }, [])

  const setFormInfo = useCallback(
    (otherInfo: {
      face_image_url: string // 面部图像
      video_url: string // 原始视频
      vol: string | number
      speed: string
      tone_id: string
    }) => {
      formInfo.current = otherInfo
    },
    [],
  )
  return (
    <div className="w-full flex flex-col">
      <ContentTabs
        contentTabs={contentTabs}
        value={activeTab}
        onValueChange={setActiveTab}
      />
      {/* 中间编辑区域 */}
      {activeTab === 'tiktok' ? (
        <div className="flex flex-1 gap-x-6 pt-1">
          <FormSection
            setFormInfo={setFormInfo}
            formSectionParams={formSectionParams}
            commit={commit}
          />
          {/* 中间文字区域 */}
          <TextSection
            getFormInfo={getFormInfo}
            commit={setUrl}
            createdId={historyId}
            setFormSectionParams={(v) => {
              setHistoryId(v.id)
              setFormSectionParams(v)
            }}
          />
          {/* 右侧预览区域 */}
          <PreviewSection createdId={historyId} videoUrl={url} />
        </div>
      ) : (
        <VideoLipSync index={0} lang="zh-CN" />
      )}
    </div>
  )
}
